<template>
  <base-paenl>
    <span slot="header">{{ "项目搜索" }}</span>
    <div slot="main" class="slot-main">
      <AreaSelect />
      <projectTree />
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
// import BasePaenl from "./CBase.vue";
import projectTree from "./CProjectTree.vue";
import AreaSelect from "./CAreaSelect.vue";

@Component({
  name: "GridInformation",
  components: {
    // BasePaenl,
    AreaSelect,
    projectTree
  }
})
export default class extends Vue { }
</script>

<style lang="scss" scoped>
.slot-main {
  height: 140px;
}
</style>
<style lang="scss">
.panel-item {
  margin: 12px 0px;
  .panel-row {
    position: relative;
    width: 404px;
    height: 27px;
    .panel-row-bg {
      position: absolute;
      width: 404px;
      height: 16px;
      background-image: url(../../assets/images/panels/liebiaobeijing.png);
      background-size: 100% 100%;
      opacity: 0.5;
      margin-top: 9px;
    }
    .panel-row-content {
      position: absolute;
      top: 0;
      left: 20px;
      width: 384px;
      height: 14px;
      display: flex;
    }
    .panel-row-content-name {
      width: 140px;
      height: 20px;
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 20px;
      color: #b4d8f7;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .panel-row-content-name1 {
      font-family: AlibabaPuHuiTi_2_75_SemiBold;
      color: #b4d8f7;
    }
    .panel-row-content-value {
      width: 230px;
      height: 20px;
      font-family: AlibabaPuHuiTi_2_75_SemiBold;
      font-size: 14px;
      line-height: 20px;
      color: #ffffff;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .panel-row-content-value1 {
      font-family: AlibabaPuHuiTi_2_85_Bold;
      color: #ffffff;
    }
  }
  .panel-second-row {
    width: 394px;
    background: rgba(0, 60, 107, 0.25);
    display: flex;
    flex-wrap: wrap;
    .panel-second-content {
      display: flex;
      align-items: center;
      padding-left: 20px;
      height: 30px;
    }
    .panel-second-content1 {
      width: 50%;
    }
    .panel-second-content-name {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 19px;
      color: #b4d8f7;
      margin-left: 5px;
    }
    .panel-second-content-value {
      font-family: AlibabaPuHuiTi_2_85_Bold;
      font-size: 14px;
      line-height: 22px;
      color: #fad06d;
    }
  }
  .panel-second-row2 {
    width: 394px;
    height: 15px;
    display: flex;
    .panel-second-content {
      display: flex;
      align-items: center;
      width: 131px;
      padding-left: 20px;
    }
    .panel-second-content-name {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 17px;
      color: #b4d8f7;
      margin-left: 5px;
    }
    .panel-second-content-value {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 17px;
      color: #3998ff;
    }
  }
  .panel-second-row3 {
    width: 394px;
    height: 25px;
    display: flex;
    .panel-second-content {
      display: flex;
      align-items: center;
      padding-left: 5px;
    }
    .panel-second-content-name {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 17px;
      color: #b4d8f7;
      margin-left: 5px;
    }
    .panel-second-content-value {
      font-family: AlibabaPuHuiTi_2_85_Bold;
      font-size: 14px;
      line-height: 22px;
      color: #fad06d;
    }
  }
}
.panel-item-click {
  cursor: pointer;
}
.panel-message {
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-size: 16px;
  color: #ffffff;
}
</style>
